<template>
  <div class="xian">
    <h4>限时折扣</h4>
  </div>

  <div class="forrrm">
    <div class="n">
      名称
      <el-input v-model="input" placeholder="请输入" />
    </div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="状态">
        <el-select v-model="form.region" placeholder="请选择使用状态">
          <el-option label="全部" value="shanghai" />
          <el-option label="未开始" value="beijing" />
          <el-option label="进行中" value="beijing" />
          <el-option label="已结束" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row class="mb-4">
      <el-button type="primary" @click="searchFn">查询</el-button>
      <el-button>重置</el-button>
    </el-row>
  </div>
  <div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="活动名称" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="originalCost" label="原价(元)" width="120" />
      <el-table-column property="discountPrice" label="折扣价(元)" width="120" />
      <el-table-column property="stock" label="库存" width="120" />
      <el-table-column property="ActivityStatus" label="活动状态" width="120" />
      <el-table-column property="termofvalidity" label="有效期" width="120" />
      <el-table-column property="operate" label="操作"  width="120" />
      <!-- <el-table-column
        property="address"
        label="Address"
        show-overflow-tooltip
      /> -->
    </el-table>
  </div>
</template>
<script setup lang="ts">
// import axios from "axios";
// let service = axios.create();
// export default {
//   data() {
//     return {
//       xianshizhekou: [],
//     };
//   },

//   mounted() {
//     service({
//       url: "http://localhost:3000/xianshizhekou",
//       method: "get"
//     }).then(res => {
//       res.data.forEach(element => {
//         this.xianshizhekou.push(element);
//       })
//     });
//   },
// };


import { ref } from "vue";
const input = ref("");
import { reactive } from "vue";

// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const onSubmit = () => {
  console.log("submit!");
};

import { ref } from 'vue'
// import { ElTable } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

interface Limitedtime{
  originalCost:string;
  discountPrice:string;
  stock:number;
  ActivityStatus:number;
  termofvalidity:number;
}

const list = reactive<Limitedtime[]>([]);


const searchFn = () => {
  service({
    url: "/upImg/gcover",
    method: "post",
    data: `input=${query.input}&search=${query.input}`,
  }).then((res) => {
    if (res.data.code === "200") {
      list.length = 0;
      list.push(...res.data.data);
      console.log("list", list);
    }
  });
};
</script>
<style scoped>
.xian {
  border: 0.3px rgba(200, 199, 199, 0.373) solid;
  border-bottom: none;
}
h4 {
  height: 80px;
  line-height: 80px;
  margin-left: 20px;
}
.el-dropdown-link {
  border: 0.3px rgba(200, 199, 199, 0.373) solid;
}
.n {
  float: left;
}
.el-input {
  width: 200px;
}
.forrrm {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 0.3px rgba(180, 177, 177, 0.556) solid;
}
.el-form-item {
  line-height: 80px;
}
.el-form {
  width: 600px;
    margin-top: 22px;
  line-height: 80px;
}
.el-row {
  float: right;
}
</style>